<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="办公用品领用申请" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>
                    <el-form-item label="领用说明" prop="reason">
                        <el-input v-model="form.reason" type="textarea" :rows="5" placeholder="请输入领用说明"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>
                </el-card>


                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>办公用品明细信息</span>
                    </div>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddOaOfficeGoodsApplyItem">
                                添加
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteOaOfficeGoodsApplyItem">
                                删除
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-table :border="Global.tableShowBorder" :data="oaOfficeGoodsApplyItemList" :row-class-name="rowOaOfficeGoodsApplyItemIndex" @selection-change="handleOaOfficeGoodsApplyItemSelectionChange" ref="oaOfficeGoodsApplyItem">
                        <el-table-column type="selection" width="50" align="center"/>
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                        <el-table-column label="名称" prop="name">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.name" placeholder="请输入需要办公用品名称进行搜索"
                                           clearable filterable remote :remote-method="getGoodsList" @change="changeGoods(scope.row)" :loading="loading">
                                    <el-option v-for="s in goodsList" :key="s.id" :label="s.name+'（品牌:：'+s.brand+'）（剩余数量：'+s.quantity+'）'" :value="s.id"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="领用数量" prop="goodsCount" width="250">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.goodsCount" placeholder="请输入领用数量"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="计量单位" prop="sysUnit" width="200">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.sysUnit" placeholder="请输入计量单位" clearable :disabled="true">
                                    <el-option v-for="dict in dict.type.common_unit" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" prop="price" width="150">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.price" placeholder="请输入单价" :disabled="true"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="品牌" prop="brand">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.brand" placeholder="请输入品牌" :disabled="true"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-form>
        </FlowInfoCard>

    </div>
</template>
<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {addOfficeGoodsApply, getOfficeGoodsApply, updateOfficeGoodsApply} from "@/api/oa/officeGoodsApply";
import {listOfficeGoodsAll} from "@/api/oa/officeGoods";
import FormTopBar from "@/views/workflow/common/formTopBar"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";

export default {
    name: "OfficeGoodsApplyForm",
    components:{FlowInfo,FormTopBar,FlowInfoCard},
    dicts: ['common_unit'],
    data() {
        return {
            goodsList:[],
            loading:false,
            // 办公用品领用明细表格数据
            oaOfficeGoodsApplyItemList: [],
            // 子表选中数据
            checkedOaOfficeGoodsApplyItem: [],
            // 表单参数
            form: {
            },
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                reason: [
                    {required: true, message: "使用原因不能为空", trigger: "blur"}
                ],
            },
            showCommitDialog:false,
            commitType:"",
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    mounted() {
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getOfficeGoodsApply(id).then(response => {
                this.form = response.data;
                this.oaOfficeGoodsApplyItemList = response.data.oaOfficeGoodsApplyItemList;
            });
        },
        getGoodsList(query){
            if (query && query !== '') {
                this.loading = true;
                let data = {
                    name: query
                }
                listOfficeGoodsAll(data).then(res=>{
                    this.loading = false;
                    this.goodsList = res.data;
                })
            }else{
                this.goodsList = []
            }
        },
        changeGoods(row){
            console.log(row)
            let value = row.name;
            this.goodsList.forEach(i=>{
                //判断我选得是哪一行
                if(value==i.id){
                    row.goodsId = i.id;
                    row.name = i.name;
                    row.sysUnit = i.sysUnit;
                    row.price = i.price;
                    row.brand = i.brand;
                    // this.oaOfficeGoodsApplyItemList.forEach((j,index)=>{
                    //     if(j.id==){
                    //
                    //     }
                    //
                    // })
                }
            })
        },
        /** 办公用品领用明细序号 */
        rowOaOfficeGoodsApplyItemIndex({row, rowIndex}) {
            row.index = rowIndex + 1;
        },
        /** 办公用品领用明细添加按钮操作 */
        handleAddOaOfficeGoodsApplyItem() {
            let obj = {};
            obj.goodsId = "";
            obj.goodsCount = "";
            obj.name = "";
            obj.sysUnit = "";
            obj.brand = "";
            obj.price = "";
            this.oaOfficeGoodsApplyItemList.push(obj);
        },
        /** 办公用品领用明细删除按钮操作 */
        handleDeleteOaOfficeGoodsApplyItem() {
            if (this.checkedOaOfficeGoodsApplyItem.length == 0) {
                this.$modal.msgError("请先选择要删除的办公用品领用明细数据");
            } else {
                const oaOfficeGoodsApplyItemList = this.oaOfficeGoodsApplyItemList;
                const checkedOaOfficeGoodsApplyItem = this.checkedOaOfficeGoodsApplyItem;
                this.oaOfficeGoodsApplyItemList = oaOfficeGoodsApplyItemList.filter(function (item) {
                    return checkedOaOfficeGoodsApplyItem.indexOf(item.index) == -1
                });
            }
        },
        /** 复选框选中数据 */
        handleOaOfficeGoodsApplyItemSelectionChange(selection) {
            this.checkedOaOfficeGoodsApplyItem = selection.map(item => item.index)
        },


        /** 提交按钮 */
        submitForm() {

            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.oaOfficeGoodsApplyItemList = this.oaOfficeGoodsApplyItemList;
                    if (this.form.id != null) {
                        updateOfficeGoodsApply(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addOfficeGoodsApply(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/oa/officeGoodsApply",query: {billType:this.form.billType}});
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
}
</script>
